<template>
  <div id="app">
    <div class="gap-example">
<!--      <audio>-->
<!--        <source src="audio/example-1.mp3" type="audio/mpeg">-->
<!--      </audio>-->
    </div>
      <router-view></router-view>
      </div>

</template>

<script>
    // import "green-audio-player/dist/css/green-audio-player.min.css"
    // import GreenAudioPlayer from "green-audio-player";
    import store from "./store";

    export default {
      name: "Home",

      data(){
          return {
             init:{},
              jude:false,
             menu:false
          }
      },
        mounted() {
            window.addEventListener('scroll',this.handleScroll,true) //监听 滚轮事件
          this.$nextTick(()=>{
            // new GreenAudioPlayer('.gap-example');
          })

        },
        methods:{
          Logout(){
                localStorage.clear();
                this.$store.commit('isLoginChange',false);
                if(this.$route.path.indexOf('info') != -1) {
                  this.$router.push({'name': 'Home'})
                }
          },
          handleScroll(){
              var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
               if(!this.navJude) {
                   this.$store.commit('UpdateScroll',scrollTop)
                   if (this.$store.state.scroll > 51) {
                     this.jude = true
                   }
                   else if (this.$store.state.scroll== 0) {
                        this.jude =false
                   }
               }
          },
          menuJude(){
              this.menu = !this.menu
          },
          zhezaoStyle(){
            return   this.menu ? { visibility: 'visible'}:'';
          },
          following(){
            return   this.menu ? { right: 0}:{ right: '-70%'};
    },
          jump(){
          this.menu = false
          }
      },
      computed:{
          navJude(){
              return   this.$route.path.indexOf('TestPaper')!= -1 ||  this.$route.path.indexOf('info')!= -1 || this.$route.path.indexOf('booking')!= -1 || this.$route.path.indexOf('Tick')!= -1
                  || this.$route.path.indexOf('BookingDetails')!= -1  || this.$route.path.indexOf('ShopWin')!= -1 || this.$route.path.indexOf('SnacksUpload')!= -1 || this.$route.path.indexOf('examination')!= -1
                  || this.$route.path.indexOf('exresult')!= -1  || this.$route.path.indexOf('BackStage')!= -1 || this.$route.path.indexOf('AddTopic')!= -1 ||this.$route.path.indexOf('PaperDetails')!= -1 ||this.$route.path.indexOf('Fu')!= -1 ||this.$route.path.indexOf('BlogHome')!= -1  || this.$route.path.indexOf('Blog')!= -1  ;
          },
            navStyle(){
                if(this.navJude){
                  return  {position: 'relative','box-shadow':'1px 1px 5px 0px rgba(0,0,0,0.25)',background:'white'};
                }else if (!this.navJude && !this.jude){
                 return   {position: 'absolute',background:'rgba(255, 255, 255, 0)'};
                }else if(!this.navJude && this.jude){
                  return {position: 'fixed','box-shadow':'1px 1px 5px 0px rgba(0,0,0,0.25)',background:'white'}
                }

                },
            aStyle(){
                if(this.jude){
                    return {color:'black'}
                }
              return  this.navJude ? {color:'black'} : {color:'white'}
            },
          scrollWatch(){
              return this.$store.state.scroll
          }
      },
        watch:{
            scrollWatch(curVal,oldVal){
                if(curVal == 0){
                    this.jude=false
                    window.pageYOffset =0
                    document.documentElement.scrollTop =0
                    document.body.scrollTop =0;
                }
            }
        },
      created() {

      },
    }
</script>

<style lang="scss">
  @import "./style/App";
</style>

